<template>
    <div>
      <!--在组件中不能出现$route (将组件与$route解耦)-->
      <h2>UserDetail</h2>
      <ul>
        <li>id:{{id}}</li>
        <li>name:{{name}}</li>
        <li>password:{{password}}</li>
        <li>a:{{a}}</li>
        <li>b:{{b}}</li>
        <li>hash:{{hash}}</li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "userDetail",
        props:["id","a","b","hash"],
        data(){
          return {
            userList:[
              {id:0,name:"damu",password:"lovedy"},
              {id:1,name:"zdy",password:"lovedamu"}
            ],
            name:"",
            password:""
          }
        },
        watch:{
          $route:{
            handler(){
              let user = this.userList.filter(user=> user.id === +this.id)[0];
              this.name = user ? user.name : "查无此人"
              this.password = user ? user.password : "查无此人"
            },
            deep:true,
            immediate:true
          }
        }
    }
</script>

<style scoped>

</style>
